<template>
	<div class="info-service">
		<div class="body">
			<div class="card">
				<div class="title">
					<span>官方资讯</span>
					<span>了解更多</span>
				</div>
				<div class="list">
					<div @click="toNewsDetail" v-for="(item, index) in list1" :key="index">
						<span>{{ index + 1 }}</span>
						{{ item.title }}
					</div>
				</div>
			</div>
			<div class="card">
				<div class="title">
					<span>相关报道</span>
					<span>了解更多</span>
				</div>
				<div class="list">
					<div @click="toNewsDetail" v-for="(item, index) in list2" :key="index">
						<span>{{ index + 1 }}</span>
						{{ item.title }}
					</div>
				</div>
			</div>
		</div>

		<div class="footer">
			<div>
				<el-image fit="cover" :src="cosPrefix + 'infoservice/i1.jpg?imageMogr2/thumbnail/750x'" />
				<span>乡村旅游学校</span>
			</div>
			<div>
				<el-image fit="cover" :src="cosPrefix + 'infoservice/i2.jpg?imageMogr2/thumbnail/750x'" />
				<span>创业合作</span>
			</div>
			<div>
				<el-image fit="cover" :src="cosPrefix + 'infoservice/i3.jpg?imageMogr2/thumbnail/750x'" />
				<span>企业风采</span>
			</div>

			<div>
				<el-image fit="cover" :src="cosPrefix + 'infoservice/i4.jpg?imageMogr2/thumbnail/750x'" />
				<span> 我要成为 云村民</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
const { pageJump } = useVR();
const { cosPrefix } = useBaseStore();
const list1 = [{ title: "【中国新闻】中国两村入选联合国世界旅游组织“最佳旅游乡村”" }, { title: " 一个吸引全球目光的小山村" }, { title: " 重庆荆竹村:以现代创意活化传统乡愁" }];
const list2 = [{ title: "【新华每日电讯】广西大寨村和重庆荆竹村入选联合国..." }, { title: "【重庆日报】武隆仙女山荆竹村跻身世界最佳旅游乡村" }, { title: " 生态底色添旅游特色" }];

const toNewsDetail = () => {
	pageJump("/xiang-meng/detail", { categoryIndex: 0, key: "CunMinFuWu" });
};
</script>
<style lang="scss" scoped>
.info-service {
	position: relative;
	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 5;
		width: 100%;
		height: 800px;

		// div是你需要添加背景图片的盒子
		content: "";
		background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/bg2.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		opacity: 1;
	}
}
.body {
	position: relative;
	z-index: 9;
	display: flex;
	align-items: center;
	padding: 40px 320px;
	.card {
		flex: 1;
		padding: 40px;
		margin-right: 25px;
		background-color: #ffffff;
		.title {
			display: flex;
			justify-content: space-between;
			span {
				font-family: SourceSerif;
				font-size: 22px;
				font-weight: bold;
				color: #cdac7e;
				&:last-child {
					font-size: 18px;
					font-weight: normal;
					color: #333333;
					text-decoration: underline;
				}
			}
		}
		.list {
			cursor: pointer;
			div {
				display: flex;
				align-items: center;
				margin-top: 20px;
				&:nth-child(2) span {
					background-color: rgb(167 172 171 / 100%);
				}
				&:last-child span {
					background-color: rgb(205 131 100 / 100%);
				}
				span {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 22px;
					height: 22px;
					margin-right: 10px;
					font-size: 14px;
					color: rgb(255 255 255 / 100%);
					background-color: rgb(252 202 88 / 100%);
					border-radius: 50%;
				}
			}
		}
	}
}
.footer {
	position: relative;
	z-index: 9;
	display: flex;
	justify-content: space-around;
	padding: 40px 320px;
	div {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 310px;
		background-color: #ffffff;
		border: 1px solid rgb(222 222 222 / 100%);
		box-shadow: 0 0 6px 0 rgb(0 0 0 / 8%);
		.el-image {
			width: 100%;
			height: 222px;
		}
		span {
			height: 80px;
			padding-top: 20px;
			font-size: 24px;
			color: rgb(51 51 51 / 100%);
		}
	}
}
</style>
